var test={
    template:`
    <div>
        i am test {{msg}}
        <button @click="msg+='1'">click here</button>
    </div>
    `,
    data:function () {
        return  {msg:'hello vue'}
    },
    // beforecreate:function () {
    //     console.log("i am beforecreate");
    //     console.log(document.body.innerHTML);
    // },
    // created:function (params) {
    //     console.log("i am beforecreate");
    //     console.log(document.body.innerHTML);
    // },

    // beforeMount:function () {
    //     console.log("i am beforemounted");
    //     console.log(document.body.innerHTML);
    // },
    // mounted:function name() {
    //     console.log("i am mounted");
    //     console.log(document.body.innerHTML);
    // }
    // beforeUpdate:function () {
    //     console.log('i am beforeUpdate');
    //     console.log(document.body.innerHTML);
    // },
    // updated:function () {
    //     console.log('i am Update');
    //     console.log(document.body.innerHTML);
    // }
    destroyed:function () {
        console.log('i am destory');
        console.log(document.body.innerHTML);
    },
    beforeDestroy:function () {
        console.log('i am beforeDestroy');
        console.log(document.body.innerHTML);
    },


    //激活和未激活，可以避免因频繁的销毁创建损失性能,需要将<keep-alive>把对象包裹住
    activated:function () {
        console.log('i am actvivated');
        console.log(document.body.innerHTML);
    },
    deactivated:function () {
        console.log('i am deactvivated');
        console.log(document.body.innerHTML);
    }

}
new Vue({
    el:'#app',
    components:{
        test
    },
    template:`
     <div>
     <keep-alive><test v-if='ifshow'></test></keep-alive>
     </br>
      <button @click='destory'>click destory</button>
     </div>
    `,
    data:function () {
        return {ifshow:true}
    },
    methods:{
        destory:function () {
            return this.ifshow=!this.ifshow;
        }

    }
  

})